<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/style.css">
    <style>
        fieldset {margin: 30px;border:1px solid #ddd;padding:20px;}   
        fieldset legend {margin-left:20px;}
    </style>
</head>
<body>

    <fieldset>
        <legend>按钮 - 默认使用button结构，也可使用&lt;input&gt;,&lt;a&gt;</legend>
        <div>
            <button class="ui-btn">基础按钮</button>
            <button class="ui-btn ui-btn-success">Success</button>
            <button class="ui-btn ui-btn-warning">Warning</button>
            <button class="ui-btn ui-btn-primary">Primary</button>
            <button class="ui-btn ui-btn-gray">灰色按钮</button>
            <button class="ui-btn ui-btn-disabled">禁用按钮</button>
            <input type="submit" value="input按钮" class="ui-btn ui-btn-error">
            <a href="" class="ui-btn ui-btn-error">a结构 button</a>
        </div>
    </fieldset>
    <fieldset>
        <legend>mini按钮</legend>
        <div>
            <button class="ui-btn ui-btn-mini">基础按钮</button>
            <button class="ui-btn ui-btn-success ui-btn-mini">Success</button>
            <button class="ui-btn ui-btn-warning ui-btn-mini">Warning</button>
            <button class="ui-btn ui-btn-primary ui-btn-mini">Primary</button>
            <button class="ui-btn ui-btn-gray ui-btn-mini">灰色按钮</button>
            <button class="ui-btn ui-btn-disabled ui-btn-mini">禁用按钮</button>
            <input type="submit" value="input按钮" class="ui-btn ui-btn-error ui-btn-mini">
            <a href="" class="ui-btn ui-btn-error ui-btn-mini">a结构 button</a>
        </div>
    </fieldset>
    <fieldset>
        <legend>按钮组合</legend>
        <div class="ui-btn-group">
            <button class="ui-btn">基础按钮</button>
            <button class="ui-btn ui-btn-success">Success</button>
            <button class="ui-btn ui-btn-warning">Warning</button>
            <button class="ui-btn ui-btn-primary">Primary</button>      
        </div>
    </fieldset>
    <fieldset>
        <legend>checkbox</legend>
        <div>
            <div class="custom-control custom-checkbox">
                <input type="checkbox" class="custom-control-input" id="api-access-check">
                <label class="custom-control-label" for="api-access-check">API Access</label>
            </div>
        </div>
    </fieldset>

    <fieldset>
        <legend>Radio</legend>
        <div>
            <div class="custom-control custom-radio">
                <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
                <label class="custom-control-label" for="customRadio1">Toggle this custom radio</label>
            </div>
            <div class="custom-control custom-radio">
                <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
                <label class="custom-control-label" for="customRadio2">Or toggle this other custom radio</label>
            </div>            
        </div>
    </fieldset>

    <fieldset>
        <legend>Range</legend>
        <input class="custom-range" id="example-range" type="range" name="range" min="0" max="100">
    </fieldset>

    <fieldset>
        <legend>Switch</legend>
        <div class="custom-control custom-switch">
            <input type="checkbox" class="custom-control-input" id="customSwitch1">
            <label class="custom-control-label" for="customSwitch1">Toggle this switch element</label>
        </div>
        <div class="custom-control custom-switch">
            <input type="checkbox" class="custom-control-input" disabled="" id="customSwitch2">
            <label class="custom-control-label" for="customSwitch2">Disabled switch element</label>
        </div> 
        <div>
            <input type="checkbox" id="switch1" checked="" data-switch="primary">
            <label for="switch1" data-on-label="Yes" data-off-label="No" class="d-block"></label>
        </div>        
    </fieldset>

    <fieldset> 
        <legend>Input</legend>
        <div class="mb20"><input type="text" class="form-control"></div>
        <div class="mb20"><input type="text" class="form-control" disabled placeholder="disabled"></div>
        <div>
            <select class="form-control">
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
            </select>            
        </div>
    </fieldset>



</body>
</html>